<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scaleble=0, user-scaleble=no"
		/>
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/index.css" />
		<!-- 导入动画模块 -->
		<script src="js/animate.js"></script>
		<script src="js/fastclick.js"></script>
		<script src="js/index.js"></script>
		<title>携程在线</title>
		<!-- 单独制作页面，flex布局 -->
	</head>
	<body>
		<header>
			<div class="header"><a href="#">搜索:目的地/酒店/景点/航班号</a></div>
		</header>
		<nav>
			<div class="nav">
				<ul class="local_nav">
					<li>
						<a href="#"><span></span>酒店</a>
					</li>
					<li>
						<a href="#"><span></span>机票</a>
					</li>
					<li>
						<a href="#"><span></span>火车票</a>
					</li>
					<li>
						<a href="#"><span></span>旅游</a>
					</li>
					<li>
						<a href="#"><span></span>攻略/景点</a>
					</li>
					<li>
						<a href="#"><span></span>名宿/客栈</a>
					</li>
					<li>
						<a href="#"><span></span>接送机/包车</a>
					</li>
					<li>
						<a href="#"><span></span>汽车/船票</a>
					</li>
					<li>
						<a href="#"><span></span>门票/活动</a>
					</li>
					<li>
						<a href="#"><span></span>美食</a>
					</li>
					<li>
						<a href="#"><span></span>特价/爆款</a>
					</li>
					<li>
						<a href="#"><span></span>航班助手</a>
					</li>
					<li>
						<a href="#"><span></span>租车</a>
					</li>
					<li>
						<a href="#"><span></span>周边游</a>
					</li>
					<li>
						<a href="#"><span></span>购物/面税</a>
					</li>
				</ul>
			</div>
		</nav>
		<article>
			<div class="sales">
				<ul class="sales-code left">
					<li><a href="#"></a></li>
					<li><a href="#">特价好货直播中</a></li>
					<li><a href="#"></a></li>
					<li>
						<a href="#"><span>￥50</span> </a>
					</li>
				</ul>
				<ul class="sales-code right">
					<li><a href="#"></a></li>
					<li><a href="#">权威排行榜</a></li>
					<li>
						<a href="#"
							><span class="hotel1"></span><span>华东奢侈酒店榜</span></a
						>
					</li>
					<li>
						<a href="#"
							><span class="hotel2"></span><span>华东温泉景点榜</span></a
						>
					</li>
				</ul>
			</div>
			<!-- 焦点图模块 -->
			<div class="special_container">
				<ul class="special">
					<li>
						<a href="#"
							><img
								src="upload/c3888a8747128cc07ff662d479e8acebff4dff8f.jpg@672w_378h_1c.webp"
								alt=""
						/></a>
					</li>
					<li>
						<a href="#"><img src="upload/adv_banner.png" alt="" /></a>
					</li>
					<li>
						<a href="#"><img src="upload/speial.jpg" alt="" /></a>
					</li>
					<li>
						<a href="#"
							><img
								src="upload/c3888a8747128cc07ff662d479e8acebff4dff8f.jpg@672w_378h_1c.webp"
								alt=""
						/></a>
					</li>
					<li>
						<a href="#"><img src="upload/adv_banner.png" alt="" /></a>
					</li>
				</ul>
				<!-- 焦点图的小圆点模块 -->
				<ul class="dots">
					<li class="dots_style"></li>
					<li></li>
					<li></li>
				</ul>
			</div>

			<div class="small_container">
				<div class="action">
					<a href="#"> 电话预定</a>
					<a href="#"> 下载携程</a>
					<a href="#"> 携程网站 <span></span></a>
				</div>
				<!-- 网站地图 -->
				<ul class="desktop">
					<li><a href="#">网站地图</a></li>
					<li><a href="#">电脑版</a></li>
					<li><a href="#">c2022携程旅行 泸ICP备08023580号</a></li>
				</ul>
			</div>
		</article>
		<footer>
			<ul class="navigtion">
				<li>
					<a href="#"><span class="bottom_nav bg1"></span><span>首页</span></a>
				</li>
				<li>
					<a href="#"><span class="bottom_nav bg2"></span><span>社区</span></a>
				</li>
				<li>
					<a href="#"><span class="bottom_nav bg3"></span><span>消息</span></a>
				</li>
				<li>
					<a href="#"><span class="bottom_nav bg4"></span><span>我的</span></a>
				</li>
			</ul>
		</footer>
	</body>
</html>
